<template>
  <view>
    <movable-area class="movable">
      <movable-view direction="all" :scale-min="1" scale :style="{width:`${bgWidth}px`,height:`${bgHeight}px`}">
        <image :src="bg" @load="loadBg" class="bg"></image>
        <view class="shop" v-for="item in list" @click="openPop(item)" :style="{top:`${item.y*scale}px`,left:`${item.x*scale}px`,width:`${item.width}px`,height:`${item.height}px`
			  ,color:`${item.color}`}" v-show="isshowitem==1">
          {{ item.name }}

          <image :src="item.acttypeimg" style="width:25px;height:25px" v-show="item.ishavaact==1"></image>

        </view>
      </movable-view>
      <view class="floorList" :style="{height:(floorList.length*180)+'rpx',top:floorHeight+'px'}">
        <!-- <view style="display: flex;align-items: center;justify-content: center;background-color: rgba(255, 255, 255, .5)">
          <uni-icons type="eye" size="30" @click="showAll()">隐藏</uni-icons>
        </view> -->
        <view class="floor" :class="{'active':floorIndex==index}" v-for="(item,index) in floorList"
              @click="chooseFloor(item,index)">
          {{ item.levelname }}

        </view>
      </view>
    </movable-area>
    <view class="bottom" v-if="detail">
      <view class="shop">
        <view class="shop-img"  @click="gotostore">
          <image :src="detail.merchatimg"></image>
        </view>
        <view class="shop-info">
          <view class="title">{{ detail.mer_name }}</view>
          <view class="second">{{ detail.namefull }}</view>
          <view class="address">{{ detail.mer_address }}</view>
        </view>
        <view class="shop-close">

          <image src="/static/images/arrow-close.png" mode="aspectFill" @click="detail=null"></image>
        </view>
      </view>

        <scroll-view class="list-scroll" scroll-x="true">
          <view  v-for="itemg in detail.goodsinfo" class="list-item">
            <image :src="itemg.image" mode="aspectFill" style="height:120px;width:110px;"></image>
            <view class="intro">{{itemg.store_name}}</view>
          </view>
        </scroll-view>

    </view>
	
	
  </view>
</template>

<script>
import {
  doornumlistm_picdetail,
  m_floorPlanListByid
} from '@/api/store.js';
import {
  mapGetters
} from "vuex";
import {
  HTTP_REQUEST_URL
} from '@/config/app';
import {
  toLogin
} from '@/libs/login.js';

export default {
  data() {
    return {
      bg: '',
      bgWidth: 0,
      bgHeight: 0,
      scale: 1,
      list: [],
      id: 0,
      actname: '',
      storeid: 0,
      floorList: [],
      floorIndex: 0,
      houseno: 0,
      bid: 0,
      detail: null,
      isshowitem: 1,
      floorHeight: 100
    }
  },
  computed: mapGetters(['isLogin', 'viewColor']),
  onLoad: function (options) {
    console.log("onload")
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.floorHeight = menuButtonInfo.bottom + 20
    console.log(menuButtonInfo);
    // if (this.isLogin) {
    this.houseno = options.houseno || 0;
    this.bid = options.bid || 0; 

    console.log("sdfsd-", options);
    if (options.scene) {
      // 扫码进
      const scene = decodeURIComponent(options.scene);
      // console.log("bid-",this.$util.getQueryString('bid', scene));
      // let bid=this.getQueryString('bid',scene) || '';
      let bid = this.getUrlParam('bid', scene) || '';
      let houseno = this.getUrlParam('houseno', scene) || '';
      console.log("bid-", bid, 'houseno-', houseno);
      // let bid = this.$util.getQueryString('bid', scene);

      if (bid) {
        this.bid = bid;
      } else {
        this.bid = 0;
      }

      if (houseno) {
        this.houseno = houseno;
      } else {
        this.houseno = 0;
      }


    } else {
      // 常规
      let wx_houseno = uni.getStorageSync('wx_houseno');
      let wx_bid = uni.getStorageSync('wx_bid');

      console.log("sdfsd-", options, "wxhouseno", wx_houseno, "wxbid", wx_bid);
      if (wx_bid) {
        this.bid = wx_bid;
      } else {
        this.bid = 1;
      }

      if (wx_houseno) {
        this.houseno = wx_houseno;
      } else {
        this.houseno = 1; // 过剩
      }

    }


    //this.getFloorlistD()
    // }else{
    // toLogin()
    // }


  },
  onShow(options) {
    console.log("onshow")
    // if (this.isLogin) {
    console.log("onshow2")

    // 常规
    let wx_houseno = uni.getStorageSync('wx_houseno');
    let wx_bid = uni.getStorageSync('wx_bid');

    console.log("sdfsd-", options, "wxhouseno", wx_houseno, "wxbid", wx_bid);
    if (wx_bid) {
      this.bid = wx_bid;
    } else {
      this.bid = 1;
    }

    if (wx_houseno) {
      this.houseno = wx_houseno;
    } else {
      this.houseno = 1; // 过剩
    }


    this.getFloorlistD()
    // }else{
    // 		   toLogin()
    // }

  },
  onReady: function () {
    console.log("ready")
  },

  methods: {

    getUrlParam(name, str) {
      let regs = new RegExp("scene=", "g"); //场景值
      str = str.replace(regs, "");
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var array = str.match(reg);
      if (array != null)
        return array[2];
    },

    getQueryString(url, name) {
      var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
      var r = url.substr(1).match(reg)
      if (r != null) {
        return r[2]
      }
      return null;
    },
    //获取楼层
    getFloorList() {
      this.floorList = [{
        id: 0,
        name: '1F',
        name_en: 'FLOOR1'
      }, {
        id: 1,
        name: '2F',
        name_en: 'FLOOR2'
      }, {
        id: 2,
        name: '3F',
        name_en: 'FLOOR3'
      }, {
        id: 3,
        name: '4F',
        name_en: 'FLOOR4'
      }, {
        id: 4,
        name: '5F',
        name_en: 'FLOOR5'
      }, {
        id: 5,
        name: '6F',
        name_en: 'FLOOR6'
      }]
    },

    getFloorlistD() {
      let houseno = 0;
      if (this.houseno) {
        houseno = this.bid;
      }
      let para = {
        houseno: this.houseno,
        bid: this.bid
      }
      // houseno
      m_floorPlanListByid(para).then(res => {
        if (res.status == 200) {
          let foorlistarr = res.data.list;
          this.floorList = foorlistarr;
          //默认1
          //console.log(foorlistarr[0]);
          this.bg = foorlistarr[0].image_input;
          this.list = foorlistarr[0].ichnography_json;
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })

        }

      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none'
        })
      })
    },


    //选择楼层
    chooseFloor(item, index) {
      this.floorIndex = index


      // this.floorList=foorlistarr;
      let countlevel = this.floorList.length;


      //默认1
      console.log("countlevel", countlevel, "index", index);
      this.bg = this.floorList[index].image_input;
      this.list = this.floorList[index].ichnography_json;


      // let doornuminfo = res.data.info;
      // this.bg = doornuminfo.image_input;
      // this.list = doornuminfo.ichnography_json;

      //this.getDoornumlist(item.id)
    },
    // 获取商品详情
    getDoornumlist: function (id) {
      doornumlistm_picdetail(id).then(res => {
        if (res.status == 200) {
          let doornuminfo = res.data.info;
          this.bg = doornuminfo.image_input;
          this.list = doornuminfo.ichnography_json;
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })

        }

      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none'
        })
      })
    },

    openPop(opt) {

      // if(opt.ishavaact==1){
      console.log("ssss",opt);
      this.detail = opt;
      // opt.ishavaact=0
      this.storeid = opt.storeid;
      // }

    },
    closePop() {
      this.isshowitem = 0
      this.$refs.popup.close()
      // uni.navigateTo({
      //   url:'/pages/users/user_goods_collection/index'
      // })
    },
    closePop1() {
      // this.isshowitem=0
      // this.$refs.popup.close()

      console.log(222222)
      // this.isshowitem=0
      this.detail = null;
      // this.$refs.popup.close()
      // this.getFloorlistD()
      // uni.navigateTo({
      //   url:'/pages/users/user_goods_collection/index'
      // })
    },

    showAll() {
      console.log(222222)
      // this.isshowitem=0
      this.detail = null;
      // this.$refs.popup.close()
      // this.getFloorlistD()

    },


    gotostore(aa) {
      // this.$refs.popup.close()
      // pages/store/home/index
	  // this.storeid
      uni.navigateTo({
        url: '/pages/store/home/index?id=' +aa 
      })
    },


    loadBg(event) {
      const width = event.detail.width
      const height = event.detail.height
      const res = uni.getSystemInfoSync();
      const scale1 = res.windowWidth / width
      const scale2 = res.windowHeight / height
      this.scale = scale1 > scale2 ? scale1 : scale2
      this.bgWidth = width * this.scale;
      this.bgHeight = height * this.scale;
      // this.list = [
      //   {x: 80, y: 230, width: 80, height: 100, name: '101', activity: '活动1'},
      //   {x: 230, y: 220, width: 160, height: 50, name: '101', activity: '活动2'},
      // ]
    },

  }
}
</script>

<style lang="scss" scoped>
.pop {
  padding: 10px;
  width: 400rpx;
  border-radius: 10px;
}

.movable {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;

  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .shop {
    position: absolute;
    // background-color: rgba(0, 0, 0, .1);
    // color: black;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15rpx
  }

  .floorList {
    position: absolute;
    right: 0;

    width: 80rpx;

    .floor {
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      background-color: rgba(255, 255, 255, .5);
    }

    .active {
      background-color: #F23A19;
      color: white;
    }
  }
}

.bottom {
  background-color: #f1f1f1;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-top: 20rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  position: fixed;
  bottom: 0;
  width: 100vw;


  .shop {
    display: flex;
    align-items: center;

    .shop-img {
      width: 200rpx;

      image {
        width: 100%;
        height: 150rpx;
      }
    }

    .shop-info {
      margin-left: 20rpx;
      .title {
        font-size: 18px;
        font-weight: bold;
      }

      .second {
        font-size: 13px;
        margin-top: 10rpx;
      }

      .address {
        font-size: 13px;
        margin-top: 10rpx;
      }
    }
    .shop-close{
      flex:1;

      display: flex;
      justify-content:flex-end;
      image{
        width:50rpx;
        height:50rpx;
      }
    }
  }
	.list-scroll{
	  margin-top: 20rpx;
	  white-space: nowrap;
	  width: 100%;
	  .list-item{
		width: 250rpx;
		display: inline-block;
		margin-right: 20rpx;
		image{
		  width: 250rpx;
		  height: 400rpx;
		}
		.intro{
		font-size: 26rpx;
		}

	  }
	}

}
</style>